<template>
  <div class="callback-container">
    <div class="callback-content">
      <el-card class="callback-card">
        <template #header>
          <div class="card-header">
            <h2>Gitee 授权登录</h2>
          </div>
        </template>
        <div class="callback-status">
          <div v-if="loading" class="loading-status">
            <el-icon class="loading-icon"><Loading /></el-icon>
            <p>正在处理授权登录...</p>
          </div>
          <div v-if="error" class="error-status">
            <el-icon class="error-icon"><CircleClose /></el-icon>
            <p>{{ errorMessage }}</p>
            <el-button type="primary" @click="returnToLogin">返回登录页</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading, CircleClose } from '@element-plus/icons-vue'
import apiClient from '@/api/api'
import store from '@/store'

const route = useRoute()
const router = useRouter()

const loading = ref(true)
const error = ref(false)
const errorMessage = ref('')

const handleCallback = async () => {
  const code = route.query.code as string
  const state = route.query.state as string

  if (!code) {
    error.value = true
    errorMessage.value = '授权参数无效'
    loading.value = false
    return
  }

  try {
    const response = await apiClient.get('http://localhost:8091/oauth/callbackGitee', {
      params: {
        code,
        state
      }
    })

    if (response.data.status === 0) {
      localStorage.setItem('token', response.data.data)
      store.commit('setLoginStatus', true)
      ElMessage({
        message: 'Gitee登录成功！',
        type: 'success'
      })
      router.push('/home')
    } else {
      throw new Error(response.data.message || 'Gitee登录失败')
    }
  } catch (err) {
    ElMessage({
      message: err instanceof Error ? err.message : 'Gitee登录失败，请重试',
      type: 'error'
    })
    returnToLogin()
  }
}

const returnToLogin = () => {
  router.push('/login')
}

onMounted(() => {
  handleCallback()
})
</script>

<style scoped>
.callback-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.callback-content {
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.callback-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.callback-status {
  padding: 30px 0;
  text-align: center;
}

.loading-status,
.error-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading-icon {
  font-size: 48px;
  color: #409eff;
  animation: rotate 2s linear infinite;
}

.error-icon {
  font-size: 48px;
  color: #f56c6c;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

p {
  margin: 0;
  font-size: 16px;
  color: #606266;
}

.el-button {
  margin-top: 16px;
}
</style>